<template>
  <view>
    <view class="recharge">
      <view class="recharge-title">充值数量</view>
      <view class="recharge-btn">
        <view
          v-for="(amount, index) in amounts"
          :key="index"
          @click="selectAmount(amount, index)"
          class="recharge-btn-item"
          :class="{ 'recharge-btn-items': activeIndex == index }"
        >
          <text>{{ amount }}个</text>
        </view>
      </view>
    </view>
    <view class="Paid">
      <view class="Paid-title">实付金额</view>
      <text class="Paid-money">{{ money }}元</text>
    </view>

    <view class="recharge-button">
      <button @click="open">在线支付购买</button>
      <button @click="GotoMatchmaker">联系红娘购买</button>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :type="msgType"
        cancelText="关闭"
        confirmText="同意"
        title="通知"
        @confirm="confirm"
        @close="close"
      >
        <view class="custom-popup"> </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface RechargeOption {
  amount: number
  index: number
}
const msgType = ref('info')
const amounts = ref<number[]>([20, 50, 100, 200])
const money = ref(0)
const activeIndex = ref<number>()
const selectAmount = (amount: number, index: number) => {
  money.value = amount
  activeIndex.value = index
}

type Nullable<T> = T | null | undefined
const popup = ref<Nullable<HTMLElement>>(null)

const GotoMatchmaker = (url: string): void => {
  uni.navigateTo({
    url: '/pages/my/MyMatchmaker/MyMatchmaker',
  })
}
const close = () => {
  if (popup.value) {
    popup.value.close()
  }
}

const confirm = () => {
  if (popup.value) {
    popup.value.close()
  }
}

const open = () => {
  if (popup.value) {
    popup.value.open()
  }
}
</script>

<style lang="scss" scoped>
.recharge,
.Paid {
  display: flex;
  align-items: center;
  margin-top: 5%;
}

.recharge-title,
.Paid-title {
  width: 15vh;
  height: 6vh;
  font-size: 2.5vh;
  text-align: center;
  line-height: 6vh;
  color: #6c6a6a;
  border-radius: 5px;
  flex-shrink: 0;
}
.recharge-title {
  margin-bottom: 7.5vh;
}
.recharge-btn {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(100% - 20vh);
  margin-left: 3vh;
}

.recharge-btn-item {
  position: relative;
  overflow: hidden;
  width: 40%;
  height: 6vh;
  margin: 1vh;
  text-align: center;
  line-height: 6vh;
  margin-top: 15px;
  border-radius: 5px;
  color: rgb(128, 128, 128);
  background-color: rgb(247, 247, 247);
  text {
    font-size: 2vh;
  }
}
.Paid-money {
  height: 6vh;
  line-height: 6vh;
  color: rgb(153, 153, 153);
  font-size: 2vh;
  margin-left: 3vh;
}
.Paid {
  margin-top: 8%;
}

.recharge-btn-items {
  background-color: #e4f3f5;
  color: #1eaec1;
}

.recharge-btn-items::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: transparent #16a1b4 transparent transparent;
  z-index: 1;
}

.recharge-btn-items::after {
  content: '√';
  position: absolute;
  top: 40%;
  right: 3%;
  color: rgb(239, 239, 239);
  font-size: 14rpx;
  z-index: 2;
}

.recharge-button {
  width: 100%;
  display: flex;
  margin-top: 10%;

  button {
    width: 22vh;
    height: 6vh;
    line-height: 6vh;
    background-color: #41ade3;
    color: white;
    border-radius: 25px;
    font-size: 2vh;
  }
}

.custom-popup {
  width: 80%;
  height: 300px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 5px;
}
</style>
